<template name="ruleTabs">
	<view :style="$s.view_color">
		<view class="place-box">
			<u-tabs :list="list" keyName="title" :lineColor="$s.theme"  @click="selectTab"
			:activeStyle="{
				color: $s.theme,
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}"
			></u-tabs>
			<view class="u-content">
				<u-parse :content="content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'ruleTabs',
		props: {
			list: {
				type: [Object,Array],
				default: [],
			},
			text:{
				type: [String],
				default: "",
			}
		},
		data() {
			return {
				now_tabs:"",
				content:"",
			};
		},
		watch: {
			text(val){
				this.content=this.$c.html_decode(val)
			}
		},
		computed: {
			...mapState({
				$s:state => state.$style,
			})
		},
		methods: {
			selectTab(item){
				this.new_tabs=item.index
				this.content=this.$c.html_decode(item.content)
			},
		}
	};
</script>

<style lang="scss">
	.place-box{
		display: block;
		margin: 0 32rpx 32rpx;
		padding: 32rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	
	.place-box .tabs-content{
		font-size: 24rpx;
		padding: 26rpx;
	}
</style>
